<template>
  <el-main>
    当前用户：{{ user == null ? '未登录' : user.username}}
    <el-form :inline="true" :model="item" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="item.condition" placeholder="编号/名称/助记码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" size="mini">查询</el-button>
        <el-button type="danger" round size="mini" @click="deleteByIds">批量删除</el-button>
        <el-button type="text" @click="to_add">新增检查项</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="list"
        stripe
        @selection-change="handleSelectionChange"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="30">
      </el-table-column>
      <el-table-column
          type="index"
          width="100">
      </el-table-column>
      <el-table-column
          prop="itemCoding"
          label="检查项编码"
          width="150">
      </el-table-column>
      <el-table-column
          prop="itemName"
          label="检查项名称"
          width="150">
      </el-table-column>
      <el-table-column
          label="适用性别"
          width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.sex == 0">男</span>
          <span v-if="scope.row.sex == 1">女</span>
          <span v-if="scope.row.sex == 2">均可</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="applyAge"
          label="适用年龄"
          width="150">
      </el-table-column>
      <el-table-column
          prop="itemExplain"
          label="说明"
          width="150">
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button type="danger" round size="mini" @click="deleteById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="item.pageNum"
        :page-sizes="[2, 3, 6, 9]"
        :page-size="100"
        layout="sizes, prev, pager, next, jumper"
        :total="pages">
    </el-pagination>

    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose">
      <h4>新增检查项</h4>
          <el-form ref="addItem" :model="addItem" :rules="rules" label-width="80px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="编码" prop="itemCoding">
                  <el-input v-model="addItem.itemCoding"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="名称" prop="itemName">
                  <el-input v-model="addItem.itemName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="适用性别" prop="sex">
                  <el-select v-model="addItem.sex" placeholder="请选择适用性别" clearable>
                    <el-option label="男" value="0">男</el-option>
                    <el-option label="女" value="1">女</el-option>
                    <el-option label="均可" value="2">均可</el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="适用年龄" prop="applyAge">
                  <el-input v-model="addItem.applyAge"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="类型" prop="typeId">
                  <el-select v-model="addItem.typeId" placeholder="请选择科室" clearable>
                    <el-option :label="type.name" :value="type.id" v-for="type of types">{{ type.name }}</el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="价格" prop="price">
                  <el-input v-model="addItem.price"></el-input>
                </el-form-item>
              </el-col>
            </el-row>


            <el-form-item label="说明" prop="itemExplain">
              <el-input v-model="addItem.itemExplain"></el-input>
            </el-form-item>
            <el-form-item label="注意事项" prop="itemNotes">
              <el-input v-model="addItem.itemNotes"></el-input>
            </el-form-item>
          </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add('addItem')">立即创建</el-button>
      </span>

    </el-dialog>
  </el-main>
</template>

<script>
export default {
  name: "ItemView",
  data() {
    return {
      addItem: {
        img: null
      },
      activeName: 'first',
      dialogVisible: false,
      user: {},
      list: [],
      item: {
        pageSize: 2,
        pageNum: 1
      },
      pages: 1,
      ids: [],
      types: [],
      rules: {
        itemCoding:[
          { required: true, message: '请输入请输入项目名称编码', trigger: 'blur' },
        ],
        itemName:[
          { required: true, message: '请输入项目名称', trigger: 'blur' },
        ],
        sex:[
          { required: true, message: '请选择适用性别', trigger: 'change' }
        ],
        applyAge:[
          { required: true, message: '请输入适用年龄', trigger: 'change' }
        ],
        itemExplain:[
          { required: true, message: '请输入项目说明', trigger: 'change' }
        ],
        itemNotes:[
          { required: true, message: '请输入注意事项', trigger: 'change' }
        ],
        typeId:[
          { required: true, message: '请选择科室', trigger: 'change' }
        ],
        price:[
          { required: true, message: '请输入价格', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 加载对话框
    to_add() {
      this.dialogVisible = true;
      // 加载检查组
      this.getTypes();
    },
    // 添加
    add(addItem) {
      this.$refs[addItem].validate((valid) => {
        if (valid) {

          this.axios.post(this.$itemHost + '/item/add', this.addItem).then(res => {
            if (res.data.result) {
              this.$message.success("添加成功");
              // 清空对话框
              this.dialogVisible = {};
              // 关闭对话框
              this.dialogVisible = false;
              // 刷新列表
              this.getList();
            } else {
              this.$message.error(res.data.msg);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });


    },
    // 获取所有的类型
    getTypes() {
      this.axios.get(this.$groupHost + 'group/types').then(res => {
        console.log('所有类型--->', res.data)
        this.types = res.data.data
      })
    },
    // 图片上传回调函数
    handleAvatarSuccess(res) {
      console.log("data----", res.data)
      this.addItem.img = res.data.url
      console.log(this.addItem.img)
    },
    // 图片的验证
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
      }
      return isLt2M;
    },
    // 列表
    getList() {
      this.axios.get(this.$itemHost + '/item/list', {params: this.item}).then(res => {
        console.log(res);
        this.list = res.data.data.list;
        this.pages = res.data.data.total
        this.item.pageNum = res.data.data.pageNum
      })
    },
    // 对话框的关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    // 搜索
    onSubmit() {
      this.getList();
    },
    // 批删
    deleteByIds() {
      this.$confirm('此操作将永久所选中的文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post(this.$itemHost + '/item/deleteById', {ids: this.ids}).then(res => {
          if (res.data.result) {
            this.$message.success("删除成功");
            this.item.pageNum = 1;
            this.getList();
          } else {
            this.$message.error(res.data.msg);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 单删
    deleteById(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post(this.$itemHost + '/item/deleteById', {ids: [id]}).then(res => {
          if (res.data.result) {
            this.$message.success("删除成功");
            this.item.pageNum = 1;
            this.getList();
          } else {
            this.$message.error(res.data.msg);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 批删的选择
    handleSelectionChange(rows) {
      this.ids = rows.map(row => {
        return row.id
      });
      console.log(this.ids)
    },
    // 分页 决定每页多少条
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.item.pageSize = val;
      this.getList();
    },
    // 分页 决定当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.item.pageNum = val;
      this.getList();
    },
    // 判断用户登录情况
    getLoginUser() {
      this.axios.get(this.$itemHost + '/item/getLoginUser').then(res => {
        this.user = res.data.data;
      })
    }
  },
  created() {
    //this.getLoginUser();
    this.getList();
  }
}
</script>

<style scoped>

</style>